<template>
    <div>
        <Form :model="formItem" :label-width="200" label-position="right">
            <Card :bordered="false" style="background:#fff;padding: 20px;width: 70vw;">
                <p slot="title">学习设置</p>

                <FormItem label="学习名称：">
                    <Input v-model="formItem.active_name" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="学习标题：">
                    <Input v-model="formItem.active_title" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="学习对象：">
                    <Input v-model="formItem.active_object" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="学习时间：">
                    <Input v-model="formItem.active_time" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="学习主办单位：">
                    <Input v-model="formItem.active_unit" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="是否重复出题：">
                    <RadioGroup v-model="formItem.is_repeat_ti">
                        <Radio :label="0">否</Radio>
                        <Radio :label="1">是</Radio>
                    </RadioGroup>
                </FormItem>

                <FormItem label="学习开始时间：">
                    <DatePicker :value="formItem.start_time" @on-change="formatTime($event,'start_time')" type="datetime" format="yyyy-MM-dd HH:mm" class="FormItemInput"></DatePicker>
                </FormItem>

                <FormItem label="学习结束时间：">
                    <DatePicker :value="formItem.end_time" @on-change="formatTime($event,'end_time')" type="datetime" format="yyyy-MM-dd HH:mm" class="FormItemInput"></DatePicker>
                </FormItem>

                <FormItem label="打分方式：">
                    <RadioGroup v-model="formItem.score_type">
                        <Radio :label="1">每题打分</Radio>
                        <Radio :label="2">全对打分</Radio>
                    </RadioGroup>
                </FormItem>

                <FormItem label="每张试卷中题目数量：">
                    <InputNumber :min="0" :precision="0" v-model="formItem.ti_num"></InputNumber> 道
                </FormItem>

                <FormItem label="每人每天可答：">
                    <InputNumber :min="0" :precision="0" v-model="formItem.per_ci_num"></InputNumber> 次
                </FormItem>

                <FormItem label="每道题分数：">
                    <InputNumber disabled :min="0" :precision="0" v-model="formItem.per_ti_score"></InputNumber> 分
                    <span class="tagging">*注：请前往 "积分" --＞ "设置" --＞ "小课堂正确答题" 处更改</span>
                </FormItem>

                <FormItem label=" 赠送分数：">
                    <InputNumber :min="0" :precision="0" v-model="formItem.zeng_score"></InputNumber> 分
                </FormItem>

                <FormItem label="每次答题限时：">
                    <InputNumber :min="0" :precision="0" v-model="formItem.dati_time"></InputNumber> 分钟
                </FormItem>

                <FormItem label="答题题库：">

                    <div v-for="item in questionList" :key="item.id" style="margin-bottom:10px">
                        <Checkbox :value="ckidList.indexOf(item.id.toString()) != -1 " @on-change="selectQuestion($event,item.id)"> {{item.name}} </Checkbox>
                        <Input :disabled="ckidList.indexOf(item.id.toString()) == -1 " style="width:100px" :value="formItem.ckid[item.id]" @on-change="inputNum($event,item.id)" placeholder="所占题目数量"></Input>
                    </div>

                </FormItem>

                <FormItem label="学习规则：">
                    <editor class="editor" ref="editor" v-model="formItem.active_rule"></editor>
                </FormItem>

                <FormItem>
                    <Button class="saveBtn" @click="save" type="primary">保存</Button>
                </FormItem>

            </Card>

        </Form>
    </div>
</template>

<script>
    import Editor from "_c/editor"
    import axios from '@/libs/api.request'
    export default {
        name: 'study-detail',
        components: {
            Editor
        },
        data() {
            return {
                formItem: {
                    active_name: '',
                    active_title: '',
                    active_object: '',
                    active_time: '',
                    active_unit: '',
                    is_repeat_ti: '',
                    start_time: '',
                    end_time: '',
                    score_type: '',
                    ti_num: 0,
                    per_ci_num: 0,
                    per_ti_score: 0,
                    zeng_score: 0,
                    dati_time: 0,
                    ckid: {},
                    active_rule: '',
                },
                // 题库列表
                questionList: [],
            }
        },
        computed: {
            ckidList() {
                return Object.keys(this.formItem.ckid)
            }
        },

        methods: {
            // 获取学习设置细节
            getStudyDetail() {
                this.list = []
                axios.ajax_post('admin-class_learn-ajax_get_cl_detail', {}).then(res => {
                    if (res.data.code === 1) {
                        this.formItem = res.data.data.detail
                        this.$refs.editor.setHtml(this.formItem.active_rule)
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            // 获取题库
            getQuestionList() {
                axios.ajax_post('admin-class_ku-ajax_get_public_ck', {}).then(res => {
                    if (res.data.code === 1) {
                        this.questionList = res.data.data.list
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            // 格式化时间
            formatTime(time, mk) {
                this.formItem[mk] = time
            },

            // 选择题库
            selectQuestion(e, id) {
                if (e) {
                    for (const key in this.formItem.ckid) {
                        if (key != id) {
                            this.$set(this.formItem.ckid, id, '')
                            return false
                        }
                    }
                    this.$set(this.formItem.ckid, id, '')
                    return false

                } else {
                    this.$delete(this.formItem.ckid, id)
                }

            },

            // 输入题目数量
            inputNum(e, id) {
                let value = e.target.value

                for (const key in this.formItem.ckid) {
                    if (key == id) {
                        this.formItem.ckid[id] = value
                    }
                }

            },

            save() {
                let data = this.formItem
                axios.ajax_post('admin-class_learn-ajax_save_cl', data).then(res => {
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: res.data.msg,
                            duration: 3
                        })
                        this.getStudyDetail()
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            }
        },
        created() {
            this.getStudyDetail()
            this.getQuestionList()
        }
    }
</script>

<style lang='less' scoped>
    .tagging {
        color: red;
        padding-left: 20px;
    }

    .FormItemInput {
        width: 20vw;
    }

    .editor {
        width: 600px;
    }

    .saveBtn {
        margin-top: 50px;
        width: 200px;
    }
</style>